<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>layout.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="../resources/extendCss/docs.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
	<style type="text/css">
    #tree-div, #tree2 {
    	float:left;
    	margin:20px;
    	border:1px solid #c3daf9;
    	width:250px;
    	height:300px;
    }
    </style>
    <script>
    Ext.onReady(function(){
    	new Ext.Viewport({
		    layout: 'border',
		    defaults: {
		        activeItem: 0
		    },
		    items: [{
		        region: 'north',
		        html: '<h1 class="x-panel-header">Page Title</h1>',
		        autoHeight: true,
		        border: false,
		        margins: '0 0 5 0'
		    }, {
		        region: 'west',
		        collapsible: true,
		        title: 'Navigation',
		        xtype: 'treepanel',
		        width: 200,
		        autoScroll: true,
		        split: true,
		        loader: new Ext.tree.TreeLoader(),
		        root: new Ext.tree.AsyncTreeNode({
		            expanded: true,
		            children: [{
		                text: 'Menu Option 1',
		                leaf: true
		            }, {
		                text: 'Menu Option 2',
		                leaf: true
		            }, {
		                text: 'Menu Option 3',
		                leaf: true
		            }]
		        }),
		        rootVisible: false,
		        listeners: {
		            click: function(n) {
		                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
		            }
		        }
		    }, {
		        region: 'center',
		        xtype: 'tabpanel',
		        items: {
		            title: 'Default Tab',
		            html: 'The first tab\'s content. Others may be added dynamically'
		        }
		    }, {
		        region: 'south',
		        title: 'Information',
		        collapsible: true,
		        html: 'Information goes here',
		        split: true,
		        height: 100,
		        minHeight: 100
		    }]
		});
    })
    </script>
  </head>
  
  <body>
  </body>
</html>
